<template>
  <Modal v-model="open" :closeOnMask="false" middle>
    <template #header>{{ title }}</template>
    <div style="width: 350px" >
      <form class="h-form">
        <div class="h-form-item-content">
          <Input v-model="value" v-if="props.type=='input'" type="text"/>
          <Input v-model="value" v-else-if="props.type=='password'" type="password"/>
          <Input v-model="value" v-else-if="props.type=='number'" type="number"/>
          <Textarea v-model="value" v-else-if="props.type=='textarea'" type="textarea" style="min-height: 100px;resize: none;"/>
          <DatePicker v-model="value" v-else-if="props.type=='date'"/>
          <DatePicker v-model="value" v-else-if="props.type=='time'" type="time"/>
          <DatePicker v-model="value" v-else-if="props.type=='datetime'" type="datetime"/>
        </div>
      </form>
    </div>
    <template #footer>
      <Button @click="cancel">取消</Button>
      <Button color="primary" @click="success">确认</Button>
    </template>
  </Modal>
</template>

<script name="Prompt" setup>
import {ref} from 'vue'

const open = ref(false)
const props = defineProps({
  title: String,
  type: {
    type: String,
    default: "input"
  }
})
const value = ref('')
const cancel = () => {
  open.value = false
}
const success = () => {
  open.value = false
  resolve(value.value)
}
let resolve=null
const show=(defaultValue='')=>{
  value.value=defaultValue
  open.value=true
  return new Promise(_resolve => {
    resolve=_resolve
  })
}
defineExpose({show})
</script>

